// # 单个评论项组件
import React from 'react';
import StatusBadge from '../StatusBadge';

const CommentItem = ({ comment, isSelected, onSelect, onDelete }) => {
    // 格式化日期
    const formatDate = (dateString) => {
        const date = new Date(dateString);
        return date.toLocaleString();
    };

    return (
        <tr className={`${isSelected ? 'bg-blue-50' : ''} hover:bg-gray-50 transition-colors`}>
            <td className="px-4 py-4 whitespace-nowrap">
                <input
                    type="checkbox"
                    checked={isSelected}
                    onChange={() => onSelect(comment._id)}
                    className="h-4 w-4 text-primary-500 rounded border-gray-300 focus:ring-primary-500"
                />
            </td>
            <td className="px-4 py-4 max-w-[300px]">
                <div className="text-sm text-gray-900 line-clamp-2">{comment.content}</div>
            </td>
            <td className="px-4 py-4 whitespace-nowrap">
                <div className="text-sm font-medium text-gray-900">{comment.name}</div>
                <div className="text-sm text-gray-500">{comment.email}</div>
            </td>
            <td className="px-4 py-4 whitespace-nowrap">
                <StatusBadge status={comment.status} />
            </td>
            <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                {formatDate(comment.createdAt)}
            </td>
            <td className="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                <button
                    onClick={() => onDelete(comment._id)}
                    className="text-red-600 hover:text-red-900 transition-colors"
                >
                    删除
                </button>
            </td>
        </tr>
    );
};

export default CommentItem;  